<template>
  <div>
    <div class="header">
      <div class="header_son">关键指标-总数</div>
      <div class="header_son1">
        <div
          class="header_main"
          v-for="(item, index) in tableData"
          :key="index"
        >
          <div class="header_main1">
            <span>{{ item.name }}</span>
            <h1>{{ item.totalPerson }}人</h1>
          </div>
          <div class="header_main2">
            <div>
              <span>今日 新增 {{ item.todayIncrease }} 人</span>
              <div class="box">
                <img
                  v-if="item.todayPercentage >= 0"
                  src="../../assets/images/up.png"
                />
                <img v-else src="../../assets/images/down.png" />
                <b>{{ Math.abs(item.todayPercentage) }}%</b>
              </div>
            </div>
            <div>
              <span>本周 新增 {{ item.weekIncrease }} 人</span>
              <div class="box">
                <img
                  v-if="item.weekPercentage >= 0"
                  src="../../assets/images/up.png"
                />
                <img v-else src="../../assets/images/down.png" />
                <b class="box">{{ Math.abs(item.weekPercentage) }}%</b>
              </div>
            </div>
            <div>
              <span>本月 新增 {{ item.monthIncrease }} 人</span>
              <div class="box">
                <img
                  v-if="item.monthPercentage >= 0"
                  src="../../assets/images/up.png"
                />
                <img v-else src="../../assets/images/down.png" />
                <b class="box">{{ Math.abs(item.monthPercentage) }}%</b>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="main_son">
        <span>时间</span>
        <div class="times">
          <el-date-picker
            @change="shijian"
            :disabled="disabled"
            v-model="kaoTime"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </div>
        <el-button @click="week">周</el-button>
        <el-button @click="mouth">月</el-button>
      </div>
      <div id="users"></div>
      <div class="table">
        <el-table
          ref="multipleTable"
          :data="tableDatas"
          tooltip-effect="dark"
          border
          :header-cell-style="{ background: '#DCDCDC', color: '#222' }"
        >
          <el-table-column prop="dateString" label="时间">
          </el-table-column>
          <el-table-column prop="oemNum" label="OEM"></el-table-column>
          <el-table-column prop="agentNum" label="普通代理"></el-table-column>
          <el-table-column
            prop="merchantNum"
            label="收单商户"
          ></el-table-column>
        </el-table>

        <div style="clear: both;"></div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import https from '../../plugins/https';
export default {
  data() {
    return {
      kaoTime: [],
      listQuery: {
        startDate: "2020-09-14",
        endDate: "2020-09-20"
      },
      form: {
        startDate: "",
        endDate: "",
        timeType: "周"
        // page: 1,
        // number: 10
      },
      tableData: [],
      tableDatas: [
        {
          officeUid: "2020-09-20",
          officeName: "8",
          payAccount: "10",
          payNum: "12",
          payNums: "8"
        },
        {
          officeUid: "2020-09-19",
          officeName: "8",
          payAccount: "8",
          payNum: "15",
          payNums: "10"
        },
        {
          officeUid: "2020-09-18",
          officeName: "8",
          payAccount: "10",
          payNum: "16",
          payNums: "10"
        },
        {
          officeUid: "2020-09-17",
          officeName: "10",
          payAccount: "12",
          payNum: "16",
          payNums: "12"
        },
        {
          officeUid: "2020-09-16",
          officeName: "12",
          payAccount: "14",
          payNum: "16",
          payNums: "18"
        },
        {
          officeUid: "2020-09-15",
          officeName: "14",
          payAccount: "14",
          payNum: "18",
          payNums: "18"
        },
        {
          officeUid: "2020-09-14",
          officeName: "16",
          payAccount: "18",
          payNum: "18",
          payNums: "22"
        }
      ],
      data: [],
      OEM: [],
      agent: [],
      mer: [],
      dan: []
    };
  },
  created() {
    this.datas(7);
    this.first();
    this.echarts();
  },
  methods: {
    // 关键指标
    echarts() {
      var _this = this;
        https.userStatisticsQuery(_this.form).then(res => {
          this.data = res.data.dateList;
          this.OEM = res.data.oemNumList;
          this.agent = res.data.agentNumList;
          this.mer = res.data.merchantNumList;
          this.tableDatas = res.data.tableList;
          this.barChart(this.data, this.OEM, this.agent, this.mer, this.dan);
          console.log(this.data);
        });
    },
    // 调用折线接口
    first() {
      var _this = this;
        https.userStatisticsTotalQuery( _this.form).then(function(d) {
          if (d.data.code == "0000") {
            _this.tableData = d.data.data;
          }
        })
        .catch();
    },
    // 折线图
    barChart(data, OEM, agent, mer, dan) {
      let dom = document.getElementById("users");
      let myChart = echarts.init(dom);
      let option = {
        tooltip: {
          trigger: "axis",
          show: true
        },
        grid: {
          left: 40,
          right: 30,
          top: 40,
          bottom: 30
        },
        title: {
          text: "",
          textStyle: {
            fontWeight: "100",
            color: "#001751",
            fontSize: 12
          }
        },
        xAxis: {
          type: "category",
          data: data
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "rgba(0, 0, 0, 0.9)",
              width: 1
            }
          }
        },
        series: [
          {
            name: "OEM",
            smooth: true,
            data: OEM,
            type: "line",
            symbolSize: 6
          },
          {
            name: "普通代理",
            smooth: true,
            data: agent,
            type: "line",
            symbolSize: 6
          },
          {
            name: "收单商户",
            smooth: true,
            data: mer,
            type: "line",
            symbolSize: 6
          },
          {
            name: "小O单",
            smooth: true,
            data: dan,
            type: "line",
            symbolSize: 6
          }
        ]
      };
      myChart.setOption(option, true);
    },
    // 获取时间
    getDateRange(dateNow, intervalDays, bolPastTime) {
      let oneDayTime = 24 * 60 * 60 * 1000;
      let list = [];
      let lastDay;
      let lastDays;
      if (bolPastTime == true) {
        lastDays = new Date(dateNow.getTime() - 1 * oneDayTime);
        lastDay = new Date(dateNow.getTime() - intervalDays * oneDayTime);
        list.push(this.formateDate(lastDay));
        list.push(this.formateDate(lastDays));
      } else {
        lastDay = new Date(dateNow.getTime() + intervalDays * oneDayTime);
        list.push(this.formateDate(dateNow));
        list.push(this.formateDate(lastDay));
      }
      return list;
    },
    // 日、月补0
    formateDate(time) {
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();

      if (month < 10) {
        month = "0" + month;
      }

      if (day < 10) {
        day = "0" + day;
      }

      return year + "-" + month + "-" + day + "";
    },
    // 获取时间
    datas(num) {
      var date = new Date();
      console.log(date);
      var list = this.getDateRange(date, num, true);
      this.form.endDate = list[1];
      this.form.startDate = list[0];
      this.kaoTime = list;
      console.log(list);
    },
    // 点击月
    mouth() {
      this.datas(30);
      this.form.timeType = "月";
      this.echarts();
    },
    // 周
    week() {
      this.datas(7);
      this.form.timeType = "周";
      this.echarts();
    },
    getD(starDate, endDate) {
      var sDate = new Date(starDate).getTime();
      var eDate = new Date(endDate).getTime();
      var thisMothDays = 1000 * 3600 * 24 * 30;

      if (eDate - sDate < thisMothDays) {
        return true;
      } else {
        return false;
      }
    },
    // 选择时间
    shijian(val) {
      console.log(val);
      this.form.startDate = val[0];
      this.form.endDate = val[1];
      this.form.timeType = "";
      if (
        this.form.startDate != "" &&
        this.form.endDate != "" &&
        this.getD(this.form.startDate, this.form.endDate) == true
      ) {
        this.echarts();
      } else {
        return layer.open({
          content: "最低可查30天内的数据",
          skin: "msg",
          time:  2 //1秒后自动关闭
        });
      }
    }
  }
};
</script>
<style scoped>
.header {
  margin: 2% 2% 0;
  /* margin-top: 2%; */
  width: 96%;
  border: 1px solid #000;
  min-height: 10px;
}
.header_son {
  width: 100%;
  height: 40px;
  background: #ebe8e8;
  font-size: 16px;
  line-height: 40px;
  padding-left: 20px;
}
.header_son1 {
}
.header_main {
  width: 33.3%;
  height: 100%;
  padding: 30px 0 30px;
  display: inline-block;
}
.header_main1 {
  width: 100%;
  height: 80px;
  border-right: 1px solid #ccc;
  text-align: center;
}
.header_main2 {
  width: 100%;
  height: 60px;
  text-align: center;
}
.header_main2 > span {
  display: block;
}
h1 {
  margin-top: 20px;
  font-size: 18px;
}
.main {
  margin-top: 20px;
  margin: 2% 2% 0;
  width: 96%;
}
.main_son {
  width: 100%;
  height: 50px;
  background: #ebe8e8;
  font-size: 16px;
  line-height: 40px;
  padding-left: 20px;
}
.times {
  width: 313px;
  display: inline-block;
  line-height: 100%;
  padding: 6px;
}
#users {
  height: 300px;
  padding-top: 20px;
}
.table {
  margin-top: 40px;
}
.el-button {
  height: 38px;
  padding: 0 20px;
}
img {
  width: 18px;
  height: 16px;
  font-weight: bold;
  padding-bottom: 3px;
}
.box {
  display: inline-block;
}
b {
  margin-left: -6px;
  font-weight: 100;
}
</style>
